<template>
  <view class="mine-menu" :class="{show:modelValue}" @touchmove.stop.prevent>
    <view class="mask" @click="close"/>

    <view class="content over-hidden bg-white" :class="{show:modelValue}">
      <scroll-view class="height-full" scroll-y>
        <by-status-bar />
        <view v-for="(item,index) in menuList" :key="index" class="menu-group">
          <view v-for="(value,key) in item" :key="key" class="flex-row align-center margin-bottom-60" @click="toPage(value.src,value.needLogin)">
            <image :src="`/static/menu/${value.icon}.png`" class="menu-icon"/>
            <text class="text-30 color-t1 text-bold">{{value.title}}</text>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>

  <by-dialog v-model="showDialog" title="提示" :content="isAudit ? '技师加入请与客服留言' : '请先申请技师入驻'" confirm-text="立即入驻" @confirm="toJump" />
  <by-dialog v-model="showTips" title="提示" content="技师加入请与客服留言" confirm-text="确认" />
</template>

<script setup lang="ts">
import useSystemStore from '@/store/system'
import useUserStore from '@/store/user'
import { jump } from '@/common/util'
import { toUserInfo, getHonorAuditConfig } from '@/common/api'

const userStore = useUserStore()
const systemStore = useSystemStore()

interface IProps{
  modelValue: boolean
  radius?: string
}

withDefaults(defineProps<IProps>(), {
  modelValue: false
})

const $emit = defineEmits(['update:modelValue', 'close'])

const menuList = reactive([
  [
    { icon: 'subscribe', title: '我的预约', src: '/pages/subscribe-history/index', needLogin: true },
    { icon: 'history', title: '联系记录', src: '/pages/relation-history/index', needLogin: true },
    { icon: 'purse', title: '钱包', src: '/pages/my-wallet/index', needLogin: true }
  ],
  [
    { icon: 'credit', title: '信用担保', src: '/pages/credit/index', needLogin: true },
    { icon: 'enter', title: '技师入驻', src: '/pages/enter/index', needLogin: true },
    { icon: 'center', title: '技师中心', src: '/pages/center/index', needLogin: true }
  ],
  [
    { icon: 'search', title: '搜索', src: '/pages/search/index', needLogin: false },
    { icon: 'evaluate', title: '去评价', src: '/pages/evaluate/index', needLogin: true },
    { icon: 'about', title: '关于我们', src: '/pages/about/index', needLogin: false },
    { icon: 'customer', title: '我的客服', src: '/pages/web-view/index', needLogin: false },
    { icon: 'setting', title: '设置', src: '/pages/settings/index', needLogin: true }
  ]
])

watch(
  () => userStore.canPay,
  (e) => setMenu(e)
)
function setMenu(e:boolean | unknown) {
  if (!e) {
    menuList[0].pop()
    menuList[1].shift()
  } else if (menuList[0].length === 1) {
    menuList[0].push({ icon: 'purse', title: '钱包', src: '/pages/my-wallet/index', needLogin: true })
    menuList[1].unshift({ icon: 'credit', title: '信用担保', src: '/pages/credit/index', needLogin: true })
  }
}
setMenu(userStore.canPay)

const showDialog = ref(false)
const showTips = ref(false)
async function toPage(value:string, needLogin:boolean) {
  if (value.includes('/enter/index') && isAudit.value && systemStore.systemInfo.brand === 'huawei') {
    showTips.value = true
    return
  }
  if (value.includes('center')) {
    if (!userStore.token) {
      jump('login', 'navigateTo', false)
      return
    } else {
      const res = await toUserInfo()
      if (res.data.userType === 1) {
        jump(value, 'navigateTo', needLogin)
        setTimeout(close, 500)
        return
      } else {
        showDialog.value = true
        return
      }
    }
  }
  jump(value, 'navigateTo', needLogin)
  setTimeout(close, 500)
}

function toJump() {
  if (isAudit.value && systemStore.systemInfo.brand === 'huawei') {
    showTips.value = true
    return
  }
  jump('/pages/enter/index')
  setTimeout(close, 500)
}

function close() {
  $emit('update:modelValue', false)
  $emit('close')
}

const isAudit = ref(false)
async function handleGetHonorAuditConfig() {
  const res = await getHonorAuditConfig()
  const { isAudit } = res.data
  if (isAudit && systemStore.systemInfo.brand === 'huawei') {
    menuList[1].splice(1, 1)
    isAudit.value = true
  }
}
handleGetHonorAuditConfig()
</script>

<style scoped lang="scss">
@include setMargin(bottom, 60);

.mine-menu{
  @include position(fixed, 0, 0, 0, 0, 200);
  opacity: 0;
  visibility: hidden;
  transition: all .3s ease-in-out;

  &.show{
    opacity: 1;
    visibility: visible;
  }

  .mask{
    @include position(absolute, 0, 0, 0, 0);
    background: $color-bg-mask;
  }

  .content{
    width: 536rpx;
    padding: 34rpx;
    @include position(absolute, 0, 0, 0, $z-index:2);
    border-radius: 44rpx 0 0 44rpx;
    transform: translateX(100%);
    transition: all .3s ease-in-out;

    &.show{
      transform: translateX(0);
    }

    .menu-group{
      padding-top:60rpx;
      border-bottom:5rpx solid $color-border;

      &:last-child{
        border:none;
      }

      .menu-icon{
        width: 54rpx;
        height: 54rpx;
        margin-right: 34rpx;
      }

    }

  }

}
</style>
